import { Directive, HostListener, Input, ElementRef, OnInit, OnChanges } from '@angular/core';


// 获取不到图片时使用imgState的路径
@Directive({
    selector: '[imgStateUrl]'
})
export class ImgStateUrlDirective implements OnInit, OnChanges {
    @Input() imgDefault;
    @Input() imgStateUrl;

    img = new Image();

    constructor(public el: ElementRef) {

    }

    ngOnInit() {
        if (this.imgDefault) {
            this.el.nativeElement.src = this.imgDefault;
        }
        this.img.onload = () => {
            this.el.nativeElement.src = this.imgStateUrl;
        };
    }

    ngOnChanges() {
        if (this.imgStateUrl) {
            this.img.src = this.imgStateUrl;
        }
    }

    // @HostListener('error', ['$event.target'])
    // ImageError(event) {
    //     if (this.imgDefault) {
    //         event.src = this.imgDefault;
    //     }
    // }
}
